<template>
  <div>
    <h2>签到数据</h2>
    <el-button type="primary" size="small" @click="addPicture(row)">证明生成</el-button>
    <el-table :data="datas" style="width: 100%">
      <el-table-column prop="aname" label="活动名称" width="180"></el-table-column>
      <el-table-column prop="type" label="活动类型" width="180"></el-table-column>
      <el-table-column prop="sid" label="学号" width="180"></el-table-column>
      <el-table-column prop="sname" label="姓名" width="180"></el-table-column>
      <el-table-column label="备注" width="360">
        <template #default="{ row }">
          <p v-if="row.remessage1">备注1: {{ row.remessage1 }}</p>
          <p v-if="row.remessage2">备注2: {{ row.remessage2 }}</p>
          <p v-if="row.remessage3">备注3: {{ row.remessage3 }}</p>
          <p v-if="row.remessage4">备注4: {{ row.remessage4 }}</p>
          <p v-if="row.remessage5">备注5: {{ row.remessage5 }}</p>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="签到时间" width="180"></el-table-column>
      <el-table-column prop="url" label="签到证明" width="180">
        <template #default="{ row }">
          <img :src="row.url" alt="签到证明图片" P v-if="row.url" style="max-width: 100%; height: auto;">
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';
import { ref, onMounted } from 'vue';
import axiosInstance from '@/plugins/Axios.js';
import { ElMessage, ElPopconfirm } from 'element-plus';
const route = useRoute();
const aid = route.params.aid; // 从route.params中获取aid
const datas = ref([]);

onMounted(() => {
  fetchActivities();
});

// 获取签到人数数据
const fetchActivities = async () => {
  try {
    console.log('获取签到人数数据，活动id为：', aid);
    const response = await axiosInstance.selectData(aid);
    console.log(response);
    datas.value = response;
  } catch (error) {
    console.error('获取签到人数数据失败:', error);
  }
};

// 生成并插入图片
const addPicture = async (row) => {
  try {
    const response = await axiosInstance.addPicture(aid);
    if (response.data.status === 'success') {
      const imageUrl = response.data.data;
      row.url = imageUrl; // 更新对应行的 url 属性
      console.log('请刷新一下页面查看签到证明图片');
    } else {
      console.error(response.data.message);
      ElMessage.error(response.data.message);
    }
  } catch (error) {
    console.error(error);
  }
};

</script>



